<template>
  <view class="base-card-component">
    <view class="product-body">
      <view class="common name" :class="{ show: evInfo.productName }">{{ evInfo.productName }} 可卖</view>
      <view class="common ev" @click="$emit('evaluate')">重新估价</view>
    </view>
    <view class="prices-coupon-body">
      <view class="prices-content">
        <text class="tip">¥</text>
        <text class="prices">{{ total }}</text>
      </view>
      <view v-if="hasHiscount" class="add-coupon-content" @click="$emit('conpou-tap')">
        <view  v-if="hasFullHiscount" class="style-all">
          <view class="all-add-item">
            <view class="title">¥{{ discountInfo.addConpous.couponMoney / 100 || 0 }}</view>
            <view class="desc">已享满加</view>
          </view>
          <view class="add-tip">+</view>
          <view class="all-add-item">
            <view class="title">¥{{ discountInfo.useConpous.couponsValue / 100 || 0 }}</view>
            <view class="desc">已享加价券</view>
          </view>
          <image class="icon" src="@/static/images/icon_coupon_right.png"></image>
        </view>
        <view v-else class="style-one">
          <view v-if="addConpouValue > 0" class="add-content add">
            <view class="title">¥{{ addConpouValue }}</view>
            <view class="desc">已享满加</view>
          </view>
          <view v-if="useConpouValue > 0" class="add-content">
            <view class="title">¥{{ useConpouValue }}</view>
            <view class="desc">已享加价券</view>
          </view>
          <view class="time-content">
            <text v-if="countdown.days > 0" class="day">{{ countdown.days }}天</text>
            <view class="hour">{{ countdown.hours | countdownValue }}</view>
            <text class="symbol">:</text>
            <view class="min">{{ countdown.minutes | countdownValue }}</view>
            <text class="symbol">:</text>
            <view class="seconds">{{ countdown.seconds | countdownValue }}</view>
            <image class="icon" src="@/static/images/icon_coupon_right.png"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="prices-trend-content">
      <image class="icon" src="@/static/images/icon_trend_down.png"></image>
      <text class="txt">预估下周下跌{{ devalue.diffPrice / 100 || 0 }}元</text>
      <view class="prices-introduce" @click="$emit('prices-explain')">价格说明</view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs'
import dayDuration from 'dayjs/plugin/duration'

dayjs.extend(dayDuration)
	
export default {
  props: {
    evInfo: Object,
    priceHistory: Array,
    discountInfo: Object,
    addCountdown: Array,
    conpouCountdown: Array
  },
	filters: {
		countdownValue (value) {
			return value > 9 ? value : `0${value || 0}`
		}
	},
	watch: {
		discountInfo: {
			handler () {
				this.computedCountdown()
			},
			deep: true
		}
	},
  computed: {
		quotationValue () {
			return this.evInfo.quotation / 100 || 0
		},
		addConpouValue () {
			return this.discountInfo.addConpous?.couponMoney / 100 || 0
		},
		useConpouValue () {
			return this.discountInfo.useConpous?.couponsValue / 100 || 0
		},
		total () {
			return this.quotationValue + this.addConpouValue + this.useConpouValue
		},
		hasHiscount () {
			return this.addConpouValue > 0 || this.useConpouValue > 0
		},
		hasFullHiscount () {
			return this.addConpouValue > 0 && this.useConpouValue > 0
		},
		devalue () {
			return this.priceHistory.reduce((last, current) => {
				return {
					price: Number(current.price || 0),
					diffPrice: Number(last.price || 0) - Number(current.price || 0)
				}
			}, {})
		}
  },
	data () {
		return {
			remaining: 0,
			countdown: {
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0
			},
			timer: null
		}
	},
	methods: {
		computedCountdown () {
			this.clearAllInterval()
			if (this.hasHiscount && !this.hasFullHiscount) {
				const { addConpous, useConpous } = this.discountInfo
				const activityEndDate = this.useConpouValue > 0 ? useConpous.couponsValidity : addConpous.activityEndDate
				const nowDate = dayjs().unix()
				const endDate = dayjs(activityEndDate).unix()
				this.remaining = endDate - nowDate
				if (this.remaining > 0) {	
					this.timer = setInterval(() => {
						if (this.remaining === 0) {
							return this.clearAllInterval()
						}
						this.remaining--
						this.countdown = dayjs.duration(this.remaining * 1000)?.$d || {}
					}, 1000)
				} else {
					this.countdown = dayjs.duration(0)?.$d || {}
				}
			}
		},
		clearAllInterval () {
			clearInterval(this.timer)
		}
	},
	beforeDestroy () {
		this.clearAllInterval()
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
